<template>
 <view>
   <view  class="demand">
       <view class="information">
 <view class="essential_size">基本信息</view>
    <view class="formData">
            <formData
              :values="values"
              :fields="fundFields"
              :borderBottom="true"
              :actionSheetList="actionSheetList"
              value="label"
            > 
            </formData>
          </view>
       </view>
   
   </view>
    <view  class="credit">
           <view class="information">
 <view class="essential_size">信用情况</view>
    <view class="formData">
            <formData
              :values="values"
              :fields="creditFields"
              :borderBottom="true"
              :actionSheetList="actionSheetList"
              value="label"
            > 
            </formData>
          </view>
       </view>
   
   </view>
   <view class="quota">
    <view class="information">
<view class="quota_size">微粒贷额度</view>
<u-radio-group v-model="values.credit_json[3].value"  class="group" size='32rpx' >
			<u-radio 
				  shape="square"
				v-for="(item, index) in particleList" :key="index" 
				:name="item.name" label-size="28rpx"
				:disabled="item.disabled"
				:class="index !== 2&&index !== 5?'radio ':''"
				class="radio_top"
			>
				{{item.name}}
			</u-radio>
		</u-radio-group>
        <view class="show"></view>
        <view class="quota_size">京东白条额度</view>
<u-radio-group v-model="values.credit_json[4].value"  class="group" size='32rpx' >
			<u-radio 
			  shape="square"
				v-for="(item, index) in particleList" :key="index" 
				:name="item.name" label-size="28rpx"
				:disabled="item.disabled"
				:class="index !== 2&&index !== 5?'radio ':''"
				class="radio_top"
			>
				{{item.name}}
			</u-radio>
		</u-radio-group>
        <view class="show"></view>
        <view class="quota_size">其他网贷共用额度</view>
<u-radio-group v-model="values.credit_json[5].value"  class="group" size='32rpx' >
			<u-radio 
				  shape="square"
				v-for="(item, index) in particleList" :key="index" 
				:name="item.name" label-size="28rpx"
				:disabled="item.disabled"
				:class="index !== 2&&index !== 5?'radio ':''"
				class="radio_top"
			>
				{{item.name}}
			</u-radio>
		</u-radio-group>
        <view class="show"></view>
                <view class="quota_size">信用卡额度</view>
<u-radio-group v-model="values.credit_json[6].value"  class="group" size='32rpx' >
			<u-radio 
				  shape="square"
				v-for="(item, index) in particleList" :key="index" 
				:name="item.name" label-size="28rpx"
				:disabled="item.disabled"
				:class="index !== 2&&index !== 5?'radio ':''"
				class="radio_top"
			>
				{{item.name}}
			</u-radio>
		</u-radio-group>
    </view>
   </view>
   <view class="overdue">
       <view class="information">
       <view class="overdue_size">逾期情况</view>
       <u-radio-group v-model="values.credit_json[7].value"  size='32rpx'  >
			<u-radio 
				  shape="square"
				v-for="(item, index) in overdueList" :key="index" 
				:name="item.name" label-size="28rpx"
				:disabled="item.disabled"
				class="overdue_radio"
			>
				{{item.name}}
			</u-radio>
		</u-radio-group>
         <view class="show"></view>
          <view class="overdue_size">使用过借贷宝吗</view>
       <u-radio-group v-model="values.credit_json[8].value"  class="suergroup" size='32rpx' >
			<u-radio 
				  shape="square"
				v-for="(item, index) in useList" :key="index" 
				:name="item.name" label-size="28rpx"
				:disabled="item.disabled"
                :class="index<2?'active':''"
			
			>
				{{item.name}}
			</u-radio>
		</u-radio-group>
         <view class="show"></view>
          <view class="overdue_size">使用过今借到吗</view>
       <u-radio-group v-model="values.credit_json[9].value"  class="suergroup" size='32rpx' >
			<u-radio 
				  shape="square"
				v-for="(item, index) in useList" :key="index" 
				:name="item.name" label-size="28rpx"
				:disabled="item.disabled"
				:class="index<2?'active':''" 
			>
				{{item.name}}
			</u-radio>
		</u-radio-group>
       </view>
   </view>
   <view class="button">
       <view class="Previous public" @click="Previous">上一步</view>
         <view class="nextStep public" @click="nextStep">下一步</view>
   </view>
 </view>
</template>

<script>
import formData from "./form/index.vue";
import { mapState, mapActions } from "vuex";
 export default {
   data () {
     return {

     }
   },
   components: {
    formData
   },
   methods: {
    Previous(){
        this.$emit('Previous');
    },
     nextStep(){
        this.$emit('nextStep');
    }
   },
   mounted() {

   },
   watch: {

   },
   computed: {
    ...mapState({
      values: (state) => state.MANAGEMENT.values,
      fundFields: (state) => state.MANAGEMENT.fundFields,
      creditFields: (state) => state.MANAGEMENT.creditFields,
      actionSheetList: (state) => state.MANAGEMENT.actionSheetList,
      particleList: (state) => state.MANAGEMENT.particleList,
      overdueList: (state) => state.MANAGEMENT.overdueList,
      useList: (state) => state.MANAGEMENT.useList,
    }),
   }
 }
</script>

<style scoped lang='scss'>
.demand{
    width: 686rpx;
height: 298rpx;
background: #FFFFFF;
border-radius: 10rpx;
margin-left: 32rpx;
margin-top: 160rpx;
}
.credit{
      width: 686rpx;
height: 380rpx;
background: #FFFFFF;
border-radius: 10rpx;
margin-left: 32rpx; 
margin-top: 32rpx;
}
.information {
 padding-left: 32rpx;
}
.essential_size {
  color: #222223;
  font-size: 32rpx;
  padding-top: 34rpx;
}
.quota{
    width: 686rpx;
height: 1012rpx;
background: #FFFFFF;
border-radius: 10rpx;
margin-left: 32rpx; 
margin-top: 10rpx;
}
.quota_size{
    font-size: 28rpx;
color: #222223;
padding-top: 32rpx;
}
.radio{
    width: 240rpx !important;
}
.radio_top{
    margin-top: 12rpx;
}
.group{
    margin-top: 20rpx;
}
.show{
	width: 624rpx;
height: 0px;
border: 2rpx solid #EEEEEE;
margin-top: 32rpx;
}
.overdue{
      width: 686rpx;
height: 736rpx;
background: #FFFFFF;
border-radius: 10rpx;
margin-left: 32rpx; 
margin-top: 10rpx;  
}
.overdue_size{
    color: #0A0B16;
    font-size: 28rpx;
    padding-top: 32rpx;
}
.overdue_radio{
    width: 600rpx !important;
    margin-top: 12rpx;
}
.active{
    width: 230rpx !important;
    
}
.suergroup{
    margin-top: 32rpx;
}
.button{
    margin-top: 82rpx;
    margin-left: 32rpx;
    display: flex;
}
.Previous{
  background: #FFFFFF;
  color: #E24D49;
}
.public{
width: 326rpx;
height: 100rpx;
display: flex;
justify-content: center;
align-items: center;
border: 2rpx solid #E24D49;
border-radius: 10rpx;
}
.nextStep{
background: #E24D49;
color: #FFFFFF;
margin-left: 34rpx;
}
</style>